<template>
  <div>
    <div class="search-container" style="position: relative; top: 10px; right: 10px">
      <input v-model="searchQuery" placeholder="搜索示例" />
      <button @click="resetSearch">重置</button>
      <button @click="resetSearch">查询</button>
    </div>

    <div class="add-btn-container" style="position:relative; top: 10px; left: 10px">
      <button  @click="showModal('create')">新增</button>
    </div>
    <div>
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>示例</th>
            <th>URL</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(example, index) in paginatedExamples" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ example.name }}</td>
            <td>
              <a :href="example.url" target="_blank">{{ example.url }}</a>
            </td>
            <td>{{ example.description }}</td>
            <td>
              <button class="view" @click="viewExample(index)">查看</button>
              <button class="edit" @click="editExample(index)">编辑</button>
              <button class="delete" @click="deleteExample(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pagination" style="position: absolute; right: 10px">
        <button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1">&lt;</button>
        <button v-for="page in pages" :key="page" @click="goToPage(page)" :class="{ selected: currentPage === page }">{{
          page }}</button>
        <button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages"> &gt; </button>

        <select v-model="itemsPerPage" @change="updateItemsPerPage">
          <option v-for="option in itemsPerPageOptions" :key="option" :value="option">{{ option }}条/页</option>
        </select>

        <span>跳至</span>
        <input type="number" v-model="currentPage" @input="goToPage($event.target.value)" min="1" :max="totalPages" />
        <span>页</span>
      </div>
    </div>

    <div class="modal" v-if="showModalFlag">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <h2>{{ modalTitle }}</h2>
        <form @submit.prevent="addExample">
          <div class="form-group">
            <label for="name">名称:</label>
            <input type="text" id="name" v-model="modalExample.name" required />
          </div>
          <div class="form-group">
            <label for="url">URL:</label>
            <input type="text" id="url" v-model="modalExample.url" required />
          </div>
          <div class="form-group">
            <label for="description">描述:</label>
            <textarea id="description" v-model="modalExample.description"></textarea>
          </div>
          <div class="button-group">
            <button @click="closeModal">取消</button>
            <button type="submit">确认</button>
          </div>
        </form>
      </div> 
    </div>

  </div>
</template>

<script>
// import CryptoJS from "crypto-js";
export default {
  name: "ExamplesTable",
  data() {
    return {
      examples: [],
      currentPage: 1,
      itemsPerPage: 10,
      itemsPerPageOptions: [10, 20, 30, 40, 50],
      searchQuery: "",
      showModalFlag: false,
      modalTitle: "",
      modalExample: {
        name: "",
        url: "",
        description: "",
      },
      modalAction: "",
    };
  },
  methods: {
    getExamples() {
      for (let i = 0; i < 200; i++) {
        this.examples.push({
          name: `Example ${i + 1}`,
          url: `httphis is example ${i + 1}`,
          description: `This is example ${i + 1}`,
        });
      }
    },
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      }
    },
    updateItemsPerPage() {
      this.currentPage = 1;
    },
    editExample(index) {
      this.showModal("edit", index);
    },
    viewExample(index) {
      this.showModal("view", index);
    },
    deleteExample(index) {
      // 删除示例
      this.examples.splice(index, 1);
    },
    addExample() {
      this.showModal("create");
    },
    resetSearch() {
      this.searchQuery = "";
    },
    searchExamples() {
      // 搜索示例
    },
    showModal(operation, index = null) {
      this.showModalFlag = true;
      this.modalAction = operation === "create" ? "创建" : operation === "edit" ? "保存" : "查看";
      this.modalTitle = operation === "create" ? "创建示例" : operation === "edit" ? "编辑示例" : "查看示例";

      if (operation === "create") {
        this.modalExample = {
          name: "",
          url: "",
          description: "",
        };
      } else if (operation === "edit") {
        this.modalExample = { ...this.examples[index] };
      } else if (operation === "view") {
        this.modalExample = { ...this.examples[index] };
      } 
    },
    closeModal() {
      this.showModalFlag = false;
    },
    saveExample() {
      if (this.modalAction === "create") {
        // 添加示例
        this.examples.push(this.modalExample);
      } else if (this.modalAction === "edit") {
        // 编辑示例
        this.examples[this.currentPage - 1] = {
          name: this.modalExample.name,
          url: this.modalExample.url,
          description: this.modalExample.description,
        };
      }
      this.closeModal();
    },
  },
  computed: {
    filteredExamples() {
      if (!this.searchQuery) {
        return this.examples;
      }
      return this.examples.filter((example) =>
        example.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
    paginatedExamples() {
      if (this.examples.length === 0) {
        this.getExamples();
      }
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.examples.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.examples.length / this.itemsPerPage);
    },
    pages() {
      const start = Math.max(1, this.currentPage - 2);
      const end = Math.min(this.totalPages, this.currentPage + 2);
      return Array.from({ length: end - start + 1 }, (_, i) => start + i);
    }
  },
};
</script>

<style scoped>
@import url("@/assets/css/examples.css");
</style>
